<template>
  <!--
  echarts插件
  1：下载安装  npm i echarts
  2:导入  import * as echarts from 'echarts'
  3:创建一个用于显示图表的标签  <div ref='xxx'></div> 设置好宽高
  4:初始化 const myCharts= echarts.init(this.$refs.xxx)
  5:应用配制  myCharts.setOption(配制)
 -->

  <div>
    <div ref="echart" class="main" />
  </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    const list = [
      {
        time: 'Mon',
        value: 120
      },
      {
        time: 'Tue',
        value: 200
      },
      {
        time: 'Wed',
        value: 400
      },
      {
        time: 'Thu',
        value: 50
      },
      {
        time: 'Fri',
        value: 600
      },
      {
        time: 'Sat',
        value: 19
      },
      {
        time: 'Sun',
        value: 460
      }
    ]
    const myCharts = echarts.init(this.$refs.echart)
    const option = {
      xAxis: {
        type: 'category',
        data: list.map((item) => item.time)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: list.map((item) => item.value),
          type: 'bar'
        }
      ]
    }
    myCharts.setOption(option)
  }
}
</script>
<style lang="scss" scoped>
.main {
  width: 500px;
  height: 300px;
  border: 2px solid #ccc;
}
</style>
